<template>
  <div class="bg">
    <nav-com
      :title="$t('settingTitle')"
      :showView='showView'
      @back="backHandler()"
      style="font-family: PingFang_teshu!important;"
    ></nav-com>
    <div class="top-view1">
<!--      设备管理-->
<!--      <van-cell-group inset class="m-b-10 m-t-10">-->
<!--        <van-cell inset is-link :title="$t('guanli')" @click="todeviceManagement()">-->
<!--        </van-cell>-->
<!--      </van-cell-group>-->
<!--      语言切换-->
      <van-cell-group inset class="m-b-10 m-t-10">
        <van-cell inset is-link :title="$t('yuyan')" @click="tolangqiehuan()">
        </van-cell>
      </van-cell-group>
<!--      权限管理-->
      <van-cell-group inset class="m-b-10 m-t-10">
        <van-cell inset is-link :title="$t('quanxian')" @click="jumpTo('/quanxianguanli')">
        </van-cell>
      </van-cell-group>
<!--      修改密码-->
      <van-cell-group inset class="m-b-10 m-t-10">
        <van-cell inset is-link :title="$t('forgotPwd')" @click="showchangename = true">
        </van-cell>
      </van-cell-group>
<!--      通知与提醒-->
      <van-cell-group inset class="m-b-10">
        <van-cell inset is-link class="teshuziti" :title="$i18n.locale == 'zh'?$t('notifications'):($t('notifications')+$t('houmian'))" style="font-family: PingFang_teshu!important;">
          <template #right-icon>
            <van-switch v-model="checked" @change="changenotice($event)" active-color="#00DEA1" inactive-color="#fafafa" />
          </template>
        </van-cell>
      </van-cell-group>
<!--      里程单位-->
<!--      <van-cell-group inset class="m-b-10">-->
<!--        <van-field-->
<!--          v-model="shareUser.unit"-->
<!--          is-link-->
<!--          readonly-->
<!--          :label="$t('mileage')"-->
<!--          :placeholder="$t('chooseMileage')"-->
<!--          input-align="right"-->
<!--          @click="jumpTo('/lichengsetings',shareUser.unit)"-->
<!--        />-->
<!--      </van-cell-group>-->
<!--      清理缓存-->
      <van-cell-group inset class="m-b-10">
        <van-cell inset is-link :title="$t('clear')" @click="clearHistory()"/>
      </van-cell-group>
<!--  自行车-->
      <van-cell-group inset class="m-b-10 m-t-10">
        <van-cell inset is-link :title="$t('cycling')" @click="jumpTo('/chooseManagement','settings')">
        </van-cell>
      </van-cell-group>
<!--      链接服务-->
      <van-cell-group inset class="m-b-10 m-t-10">
        <van-cell inset is-link :title="$t('linkserve')" @click="jumpTo('/linkserve')">
        </van-cell>
      </van-cell-group>
<!--      使用帮助-->
<!--      <van-cell-group inset class="m-b-10 m-t-10">-->
<!--        <van-cell inset is-link :title="$t('commonproblem')" @click="tobangzhu()">-->
<!--        </van-cell>-->
<!--      </van-cell-group>-->
      <!--      注销账号-->
      <van-cell-group inset class="m-b-10 m-t-10">
        <van-cell inset is-link :title="$t('zhuxiao')" @click="jumpTo('/zhuxiao',shareUser.email)">
        </van-cell>
      </van-cell-group>
      <div  class='fatSubmit'>
        <van-button round type="info" class="fatSubmit_yanse" block @click="loginout()">{{ $t('loginout') }}</van-button>
      </div>
<!--      忘记密码-->
      <van-popup
        round
        v-model="showchangename"
        position="center"
      >
        <div class="rili-content">
          <van-row  class="m-b-10 m-t-10 topContent">
            <van-col span="24" class="fontStyle">{{ $t('changemima') }}</van-col>
          </van-row>
          <van-cell-group inset class="m-b-10">
            <div class="input">
              <div class="label">{{$t('oldpassword')}}</div>
              <div class="inputcontent"><input type="text" :placeholder="$t('oldpasswordplace')" v-model="oldpasswords"/></div>
            </div>
            <div class="input">
              <div class="label">{{$t('newpassword')}}</div>
              <div class="inputcontent"><input type="text" :placeholder="$t('newpasswordplace')" v-model="passwords"/></div>
            </div>
          </van-cell-group>
          <div class='fatSubmit'>
            <van-button round type="info" class="fatSubmit_yanse1" block @click="showchangename=false">{{ $t('quxiao') }}</van-button>
            <van-button round type="info" class="fatSubmit_yanse1" block @click="submitpassword()">{{ $t('accomplish') }}</van-button>
          </div>
        </div>
      </van-popup>
    </div>
  </div>
</template>
<script>
import { Toast } from 'vant'
import navCom from '@/components/nav-com.vue'
import { modifypwd, profile, userInfo } from '../../api/user'
export default {
  name: 'bonusList',
  components: {
    navCom
  },
  data () {
    return {
      checked: '',
      showView: true,
      showPage: true,
      showchangename: false,
      lichengValue: '',
      shareUser: {},
      passwords: '',
      oldpasswords: ''
    }
  },
  onShow(){
    this.getnoticeStatus()
  },
  mounted () {
    this.init()
    this.getnoticeStatus()
    const navs = navigator.userAgent
    if (navs.indexOf('Android') > -1 || navs.indexOf('Adr') > -1) {
      let _this = this
      // 根据自己需要来监听对应的key
      window.addEventListener('setItemEvent', function (e) {
        // e.key : 是值发生变化的key
        // e.newValue : 是可以对应的新值
        if (e.key === 'getNotice') {
          setTimeout(()=>{
            if (localStorage.getItem('getNotice')=='1') {
              _this.checked = true
            } else {
              _this.checked = false
            }
          },600)
        }
      })
    }
  },
  methods: {
    tobangzhu () {
      this.jumpTo('/helpRobot')
    },
    loginout () {
      const nav = navigator.userAgent
      if (nav.indexOf('Android') > -1 || nav.indexOf('Adr') > -1) {
        phone.loginOut()
      } else if (nav.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        this.$bridge.callhandler('loginOut', {}, res => {})
      }
    },
    todeviceManagement () {
      this.jumpTo('/deviceManagement', { canshu: 'settings' })
    },
    tolangqiehuan () {
      this.jumpTo('/langqiehuan')
    },
    submitpassword () {
      if (this.oldpasswords.trim() == '' || this.passwords.trim() == '') return
      modifypwd({ 'newpassword': this.passwords.trim(), 'password': this.oldpasswords.trim() }).then((res) => {
        console.log('=====res.', res)
        if (res.code == 1) {
          if (this.$i18n.locale == 'zh') {
            this.$toast('修改成功')
            this.showchangename = false
            this.passwords = ''
            this.oldpasswords = ''
          } else {
            this.$toast('Changed')
            this.showchangename = false
            this.passwords = ''
            this.oldpasswords = ''
          }
          this.loginout()
        } else {
          this.$toast(res.msg)
        }
      })
    },
    changenotice (e) {
      if (e) {
        this.shareUser.notice = '1'
      } else {
        this.shareUser.notice = '0'
      }
      const nav = navigator.userAgent
      if (nav.indexOf('Android') > -1 || nav.indexOf('Adr') > -1) {
        phone.userInfoEdit()
        phone.changeNotice()
      } else if (nav.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        setTimeout(() => {
          this.$bridge.callhandler('userInfoEdit', {}, res => {})
          this.$bridge.callhandler('changeNotice', {}, res => {
            let datas = res
            if (datas.isopen=='1') {
              this.checked = true
            } else {
              this.checked = false
            }
          })
        })
      }
    },
    jumpTo (url, canshu) {
      this.$router.push({ path: url,
        query: { canshu: canshu }
      })
    },
    onPageConfirm () {

    },
    // 返回
    backHandler () {
      const nav = navigator.userAgent
      if (nav.indexOf('Android') > -1 || nav.indexOf('Adr') > -1) {
        phone.onBackPress()
      } else if (nav.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        this.$bridge.callhandler('onBackPress', {}, res => {})
      } else {
        this.$router.go(-1)
      }
    },
    clearHistory () {
      if (this.$i18n.locale == 'zh') {
        this.$toast('清理缓存成功')
      } else {
        this.$toast('Memory Cleaned')
      }
      const nav = navigator.userAgent
      if (nav.indexOf('Android') > -1 || nav.indexOf('Adr') > -1) {
        phone.clearHistory()
      } else if (nav.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        this.$bridge.callhandler('clearHistory', {}, res => {})
      }
    },
    // 初始化
    init () {
      this.getUserData()
    },
    getnoticeStatus(){
      const nav = navigator.userAgent
      if (nav.indexOf('Android') > -1 || nav.indexOf('Adr') > -1) {
        let res = phone.getNoticeStatus()
        console.log("res =====",res)
        // let datas = JSON.parse(res)
        if (res=='1') {
          this.checked = true
        } else {
          this.checked = false
        }
      } else if (nav.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        this.$bridge.callhandler('getNoticeStatus', {}, res => {
          let datas = res
          if (datas.isopen=='1') {
            this.checked = true
          } else {
            this.checked = false
          }
        })
      }
    },
    // 用户信息
    getUserData () {
      userInfo().then((res) => {
        if (res.code == 1) {
          this.shareUser = res.data.userinfo
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.top-view1{
  margin-top: 26.23vw;
}
.m-b-10{
  margin-bottom: 10px;
}
.m-t-10{
  margin-top: 10px;
}
.input{
  display: flex;
  align-items: center;
  padding: 14px 4px 8px;
  border-bottom: 1px solid #f0f0f0;
  .label{
    font-size: 20px;
    margin-right: 6px;
    width: 60%;
  }
  .inputcontent{
    width: 64%;
    input{
      font-size: 20px;
      outline: none;
      border: none;
      width: 100%;
      height: 100%;
    }
  }
}
.van-cell__title, .van-cell__value {
  flex: 1;
  display: flex;
  align-items: center;
}
.rili-content{
  width: 90vw;
  background: #fff;
}
.fatSubmit{
  padding: 0rem 0.42667rem 10px;
  display: flex;
  justify-content: space-between;
  .fatSubmit_yanse1{
    margin-top: 20px;
    width: 48%;
    border: 0px!important;
    background: linear-gradient(90deg, #1ED6C2 0%, #00DEA1 100%);
    box-shadow: 0px 2px 4px 0px rgba(10,211,159,0.3);
    font-size: 18px!important;
    font-weight: 600;
  }
  .fatSubmit_yanse{
    border: 0px!important;
    background: linear-gradient(90deg, #1ED6C2 0%, #00DEA1 100%);
    box-shadow: 0px 2px 4px 0px rgba(10,211,159,0.3);
    font-size: 18px!important;
    font-weight: 600;
  }
}
.fontStyle{
  font-size: 20px;
  font-weight: 600;
  font-family:PingFang, PingFangSC-Regular, PingFang SC;
  color:#303030;
  text-align: center;
}
::v-deep .van-cell{
  font-size:20px!important;
}
::v-deep .van-cell__title>span,::v-deep .van-button__text{
  font-family: PingFang_teshu!important;
  font-weight: bold;
}
::v-deep .back_text>div{
  font-family: PingFang_teshu!important;
  font-weight: bold;
}
</style>
